import React, { useState, useCallback} from 'react'
import { Button, DatePicker} from 'antd-mobile'
import  dayjs from 'dayjs'
const now = new Date()
let flag:string  =  ''
function MyDate() {
  const [visible, setVisible] = useState(false)
  const setTitle = (val:Date) => {
    flag = val.toDateString()
    flag = dayjs(flag).format('YYYY-MM-DD')
    console.log(flag,'flag')
  }
  const labelRenderer = useCallback((type: string, data: number) => {
    switch (type) {
      case 'year':
        return data + '年'
      case 'month':
        return data + '月'
      case 'day':
        return data + '日'
      case 'hour':
        return data + '时'
      case 'minute':
        return data + '分'
      case 'second':
        return data + '秒'
      default:
        return data
    }
  }, [])

  return (
    <>
      <Button
        onClick={() => {
          setVisible(true)
        }}
      >
        {
            flag?
            flag:'日期选择'
        }
      </Button>
      <DatePicker
        title='日期选择'
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
        defaultValue={now}
        max={now}
        onConfirm={val => {setTitle(val)
        }}
        renderLabel={labelRenderer} />
    </>
  )
}
export default () => {
  return (
    <>
        <MyDate />
    </>
  )
}